<template>
  <div>
    <el-form ref="form" :rules="formRules" :model="form" label-width="100px" label-position="right">
      <el-tabs>
        <el-tab-pane label="考生基本信息">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="考生省份" prop="province">
                <Province v-model="form.province" :disabled="!!$store.state.user.area" :show="false" @change="handleProvinceChange" />
              </el-form-item>
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="考生性别" prop="gender">
                <Gender v-model="form.gender" />
              </el-form-item>
              <el-form-item label="科别" prop="subject_category">
                <SubjectCategory v-model="form.subject_category" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="考生分数" prop="score">
                <el-input v-model="form.score" placeholder="请输入分数" />
              </el-form-item>
              <el-form-item label="考生位次" prop="rank">
                <el-input v-model="form.rank" placeholder="请输入排名" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入手机号" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="目标批次" prop="target">
                <AcademyLevel v-model="form.target" placeholder="请输入目标批次" :options="targetList" />
              </el-form-item>
            </el-col>
            <el-col v-if="form.province === '江苏'" :span="8">
              <el-form-item :label="form.subject_category === '文科' ? '历史':'物理'" prop="subject">
                <JiangSuSubjectScore v-model="form.subject" />
              </el-form-item>
            </el-col>
            <el-col v-if="form.province === '江苏'" :span="8">
              <el-form-item label="其他" prop="other">
                <JiangSuSubjectScore v-model="form.other" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="考生偏好设置">
          <el-form-item label="地域倾向" prop="intended_region">
            <Province v-model="form.intended_region" placeholder="请选择地域倾向" :multiple="true" :show="false" />
          </el-form-item>
          <el-form-item label="意向专业" prop="intended_major">
            <Major v-model="form.intended_major" :options="majorList" />
          </el-form-item>
          <el-form-item label="目标大学" prop="target_university">
            <AcademySelect v-model="form.target_university" placeholder="请输入目标大学" />
          </el-form-item>
          <el-form-item label="排除省份" prop="except_province">
            <Province v-model="form.except_province" placeholder="请选择排除省份" :multiple="true" :show="false" />
          </el-form-item>
          <el-form-item label="排除大学" prop="except_university">
            <AcademySelect v-model="form.except_university" placeholder="请输入排除大学" />
          </el-form-item>
          <el-form-item label="排除专业" prop="except_major">
            <Major v-model="form.except_major" :options="majorList" />
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <el-button type="danger" @click="handleReset">重置</el-button>
        <el-button type="primary" @click="handleSubmit">生成方案</el-button>
      </el-form-item>
    </el-form>
    <div style="height: 15px" />
    <el-tabs v-if="results.length > 0 | academyResult.length>0|majorResult>0">
      <el-tab-pane label="平衡">
        <div v-if="results.length !== 0">
          <Solution
            :data="results"
            :scores="scores"
            :type="1"
            :user="{
              level: form.target,
              province: form.province,
              division: form.subject_category,
            }"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="院校优先">
        <div v-if="academyResult.length !== 0">
          <Solution
            :data="academyResult"
            :type="2"
            :scores="scores"
            :user="{
              level: form.target,
              province: form.province,
              division: form.subject_category,
            }"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="专业优先">
        <div v-if="majorResult.length !== 0">
          <Solution
            :data="majorResult"
            :type="3"
            :scores="scores"
            :user="{
              level: form.target,
              province: form.province,
              division: form.subject_category,
            }"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { TableMixin } from '../../../components/mixin'
import { getList } from '../../../api/table'
import { academyLevels, majors } from '../../../api/app'
import { generate } from '../../../api/generate'

export default {
  components: {
    Major: () => import('../../../components/Major'),
    Province: () => import('../../../components/AreaSelect'),
    SubjectCategory: () => import('../../../components/SubjectCategoryRadioGroup'),
    AcademySelect: () => import('../../../components/AcademySelect'),
    AcademyLevel: () => import('../../../components/AcademyLevel'),
    JiangSuSubjectScore: () => import('../../../components/JiangSuSubjectScore'),
    Solution: () => import('./components/Solution'),
    Gender: () => import('../../../components/GenderRadioGroup')
  },
  mixins: [TableMixin],
  data() {
    return {
      form: {
        province: '',
        gender: '男',
        mobile: '',
        name: '',
        score: '',
        rank: '',
        target: '',
        remark: '',
        subject_category: '理科',
        except_university: [],
        except_major: [],
        target_university: [],
        intended_major: [],
        intended_region: [],
        except_province: [],
        subject: 1,
        other: 1
      },
      targetList: [],
      majorList: [],
      results: [],
      academyResult: [],
      scores: [],
      majorResult: []
    }
  },
  computed: {
    formRules() {
      if (this.form.province === '江苏') {
        return {
          province: [
            { required: true, message: '未选择省份' }
          ],
          mobile: [
            { required: true, message: '未填写手机号' }
          ],
          rank: [
            { required: true, message: '未填写位次' }
          ],
          target: [
            { required: true, message: '未选择批次' }
          ],
          subject: [
            { required: true, message: '未选择分数' }
          ],
          other: [
            { required: true, message: '未选择分数' }
          ]
        }
      } else {
        return {
          mobile: [
            { required: true, message: '未填写手机号' }
          ],
          province: [
            { required: true, message: '未选择省份' }
          ],
          target: [
            { required: true, message: '未选择批次' }
          ],
          rank: [
            { required: true, message: '未填写位次' }
          ]
        }
      }
    }
  },
  created() {
    this.form.province = this.$store.state.user.area ? this.$store.state.user.area.label : ''
    if (this.form.province) {
      this.handleProvinceChange(this.form.province)
    }
  },
  mounted() {
    // this.getList()
    this.getMajors()
  },
  methods: {
    getMajors() {
      majors().then(res => {
        this.majorList = res
      })
    },
    getList() {
      this.wrapResourceList(getList, {})
    },
    handleProvinceChange(province) {
      this.form.target = ''
      academyLevels({
        province: province
      }).then(res => {
        this.targetList = res
      })
    },
    handleReset() {
      this.$refs['form'].resetFields()
      this.targetList = []
    },
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.results = []
          const loading = this.$loading({
            lock: true,
            text: '生成中，请稍候...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          generate(this.form).then(res => {
            if (res.code === '1200004') {
              this.$message.error(res.message)
            } else if (!res.code === '0') {
              this.$message.error('填写有误，请检查')
            } else {
              this.results = res.result.data.balance
              this.academyResult = res.result.data.academy
              this.majorResult = res.result.data.major
              this.scores = res.scores
            }
          }).finally(() => {
            loading.close()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
